<template>
	<view class="makerMall">
		<nav-bars title="商品分销"></nav-bars>
		<!-- <view class="searchBox">
			<view class="iconfont icon-search"></view>
			<input type="text" value="" placeholder="请输入分销商品名称" />
		</view> -->
		<view class="searchBox">
			<u-search placeholder="请输入分销商品名称" placeholder-color="#939393" :show-action="false" v-model="keyword"
				@search="EnterClick" @clear="SearchClear" :animation="false">
			</u-search>
		</view>
		<view class="swiperBox">
			<swiper class="swiper" :indicator-dots="false" autoplay circular indicator-active-color="#C3AB7C"
				@change="SwiperChanege">
				<swiper-item v-for="(item,index) in Bannerlist" :key="index">
					<image :src="item.img"></image>
				</swiper-item>
			</swiper>
			<view class="SwiperDots" style="display: flex;align-items: center;">
				<view :class="[SwiperIndex == index?'SwiperActive':'SwiperItem']" v-for="(item,index) in Bannerlist"
					:key="index"></view>
			</view>
		</view>
		<!-- 筛选 -->
		<view :class="['selectBox',scrollTop >= 110?'selectBoxB':'']" :style="{top:scrollTop >= 110?navHeight+'px':0}">
			<u-dropdown menu-icon="arrow-down-fill" menu-icon-size="14" active-color="#A98F68" inactive-color="#333">
				<u-dropdown-item v-model="value1" :title="price" :options="options1" @change="ChangePrice">
				</u-dropdown-item>
				<u-dropdown-item v-model="value2" :title="profit" :options="options2" @change="ChangeProfit">
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 商品列表 -->
		<view class="shopList">
			<view class="item" v-for="(item,index) in ListArr" :key="index" @click="GoDetaile(item,index)">
				<image :src="item.main_imgurl"></image>
				<view class="itemInfo">
					<view class="top">
						<view class="title omit-1">{{item.product_title}}</view>
						<!-- <view class="tag">
							已分销450人
						</view> -->
					</view>
					<view class="bottom">
						<view class="left">
							<view class="price">销售价 ￥<text>{{item.price}}</text></view>
							<view class="sale_price">底价 ￥{{item.rate_price}}</view>
						</view>
						<view class="right" @click.stop="GoShareView(item,index)">去分销</view>
					</view>
				</view>
			</view>
			<view v-if="ListArr.length == 0" style="">
				<u-empty text="暂无数据" mode="list" icon-size="550"
					src="https://cos.ryz1620.com/liankun/static/nullBg.png"></u-empty>
			</view>
			<view style="flex: 1;" v-if="ListArr.length > 0 && isloadShow">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</view>
		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model?'show':'']" @click.stop="is_show_model=false">
			<view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"
				@click.stop="">
				<view class="md-content">
					<view class="md-content-item" @click="toUserMini">
						<image open-type="share" src="../../../static/zhangyu-qrcode-poster/wechat.png"></image>
						<view>分享给用户</view>
						<button @click="is_show_model=false" class="sharebtn"></button>
					</view>
					<view class="md-content-item" @click="sharePoster">
						<image src="../../../static/zhangyu-qrcode-poster/haibao.png"></image>
						<view>生成海报</view>
					</view>
				</view>
				<view class="cancel" @click="is_show_model=false">取消</view>
			</view>
		</view>
		<qrcode-poster ref="poster" :title="shaegood.product_title" :subTitle="shaegood.store_name"
			:headerImg="shaegood.main_imgurl" :price="parseFloat(shaegood.price)"></qrcode-poster>
	</view>
</template>

<script>
	import service_distribution from '@/service/distribution.js'
	import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue'
	export default {
		components: {
			QrcodePoster
		},
		data() {
			return {
				Bannerlist: [],
				SwiperIndex: 0,
				options1: [{
						label: '综合',
						value: null,
					},
					{
						label: '价格由高到低',
						value: 'desc',
					},
					{
						label: '价格由低到高',
						value: 'asc',
					},
				],
				options2: [{
						label: '综合',
						value: null,
					},
					{
						label: '利润由高到低',
						value: 'desc',
					},
					{
						label: '利润由低到高',
						value: 'asc',
					},
				],
				keyword: '',
				value1: '', //价格
				value2: '', //利润
				price: '价格',
				profit: '利润',
				scrollTop: 0,
				page: 1,
				ListArr: [], //列表数据
				loadStatus: 'loadmore',
				isloadShow: false,
				is_show_model: false, //是否显示分享模态窗
				shaegood: '',
				sharecode: '',
				goodsId: null,
				sku_id: ''
			}
		},
		computed: {
			navHeight() {
				var navHeights = uni.getStorageSync('StatusBarHeight')
				return navHeights.height
			}, // Nav栏高度
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			var that = this
			that.getBannerArr()

		},
		onShow() {
			var that = this
			that.getChangePriceList()
		},
		onReachBottom() {
			var that = this
			that.page++;
			that.isloadShow = true
			that.loadStatus = 'loading';
			uni.showLoading({
				title: '加载中...'
			})
			let params = {
				keyword: that.keyword,
				price: that.value1,
				profit: that.value2,
				page: that.page,
			}
			service_distribution.getChangePriceList(params)
				.then(res => {
					if (res.code == 1) {
						// console.log(res.data.products)

						if (res.data.products.length > 0) {
							// that.flowList = that.flowList.concat(res.data.products)
							that.ListArr = that.ListArr.concat(res.data.products)
						} else {
							that.loadStatus = 'nomore'
						}
					} else {
						that.$utils.showErr({
							title: res.msg
						})
					}
				})
			setTimeout(function() {
				uni.hideLoading()
				this.loadStatus = 'loadmore';
			}, 500)
		},
		mounted() {},
		methods: {

			// 小程序跳转
			toUserMini() {
				let user_id = this.$store.state.index.userId
				// console.log(this.goodsId, user_id, '管理端准备传的goodsId和user_id')
				uni.navigateToMiniProgram({
					appId: 'wx66230223cee807f1', // 其他小程序APPID
					envVersion: 'trial',
					path: `/pages_mall/pages/mall/goods_details/goods_details`, //其他小程序地址
					extraData: {
						product_id: this.goodsId,
						gid: user_id
					},
					success: res => {
						// 打开成功
						// console.log("打开成功", res);
					},
					fail: err => {
						// console.log('打开失败')
					}
				});
			},
			//分享海报
			sharePoster() {
				//获取带参数二维码并传递
				this.is_show_model = false
				// 'https://mls-dev-1300463815.cos.ap-guangzhou.myqcloud.com/liankun/static/IMG1665.jpeg'
				this.$refs.poster.showCanvas(this.sharecode)
			},
			GoShareView(item, index) {
				var that = this
				console.log(item);
				that.goodsId = item.product_id
				that.sku_id = item.product_skuid
				that.shareimg()
			},
			shareimg() {
				uni.showLoading()
				let gid = this.$store.state.index.userId
				service_distribution.GoodsShare({
						product_id: this.goodsId,
						sku_id: this.sku_id
					})
					.then(res => {
						uni.hideLoading()
						this.is_show_model = true
						// console.log(res, 'imgimg')
						if (res.code == 1) {
							var specsType = res.data.specs_type == 1 ? false : true
							var SkuList = res.data.sku_lst
							// goodsInfo.parameter 
							// 多规格
							if (specsType) {
								SkuList.forEach((item, index) => {
									if (this.sku_id == item.sku_id) {
										// console.log(item);
										res.data.price = item.price
									}
								})
								this.shaegood = res.data
								this.sharecode = res.data.wx_code_url
							} else {
								// console.log(2);
								// console.log(SkuList);
								res.data.price = res.data.sku_lst[0].price
								this.shaegood = res.data
								this.sharecode = res.data.wx_code_url
							}
						}
					})
			},
			// 搜索
			EnterClick(e) {
				var that = this
				// console.log(e);
				if (e != '') {
					that.getChangePriceList()
				} else {
					that.$utils.showErr({
						title: '请输入分销商品名称'
					})
				}
			},
			// 清楚收缩内容
			SearchClear() {
				var that = this
				that.keyword = ''
				that.getChangePriceList()
			},
			// 轮播切换index
			SwiperChanege(e) {
				this.SwiperIndex = e.detail.current
			},
			// 价格筛选
			ChangePrice(e) {
				var that = this
				switch (e) {
					case null:
						that.price = '价格'
						break;
					case 'desc':
						that.price = '价格由高到低'
						break;
					case 'asc':
						that.price = '价格由低到高'
						break;
						// default:
				}
				that.getChangePriceList()
				// console.log(this.value1);
			},
			// 利润筛选
			ChangeProfit(e) {
				var that = this
				switch (e) {
					case null:
						that.profit = '利润'
						break;
					case 'desc':
						that.profit = '利润由高到低'
						break;
					case 'asc':
						that.profit = '利润由低到高'
						break;
						// default:
				}
				that.getChangePriceList()
			},
			// 获取改价列表
			getChangePriceList() {
				var that = this
				that.page = 1
				let params = {
					keyword: that.keyword,
					price: that.value1,
					profit: that.value2,
					page: that.page,
				}
				service_distribution.getChangePriceList(params)
					.then(res => {
						if (res.code == 1) {
							// console.log(res.data.products)
							that.ListArr = res.data.products
						} else {
							that.$utils.showErr({
								title: res.msg
							})
						}
					})
			},
			// 去改价详情
			GoDetaile(item, index) {
				uni.navigateTo({
					url: '/pages_makerMall/pages/detaile/detaile?product_id=' + item.product_id
				})
			},
			// 获取轮播
			getBannerArr() {
				var that = this
				let params = {
					type: 32,
				}
				service_distribution.getBanner(params)
					.then(res => {
						if (res.code == 1) {
							that.Bannerlist = res.data
						} else {
							that.$utils.showErr({
								title: res.msg
							})
						}
					})
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
	}

	.makerMall {
		height: 100%;
		background-color: #fff;

		.searchBox {
			padding: 10rpx 32rpx 0rpx 32rpx;
		}

		.swiperBox {
			width: 690rpx;
			height: 300rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin: 30rpx auto 20rpx;
			box-shadow: 0px 4rpx 14rpx 0px #F1F1F1;
			position: relative;

			.swiper {
				image {
					width: 690rpx;
					height: 300rpx;
				}
			}

			.SwiperDots {
				position: absolute;
				bottom: 16rpx;
				left: 50%;
				transform: translate(-50%, 0%);
			}

			.SwiperItem {
				width: 12rpx;
				height: 12rpx;
				background: rgba(0, 0, 0, .3);
				border-radius: 100%;
				margin: 0 10rpx;
			}

			.SwiperActive {
				width: 24rpx;
				height: 12rpx;
				background: #C3AB7C;
				margin: 0 6rpx;
				border-radius: 14rpx;
			}
		}

		.selectBox {
			height: 80rpx;
			margin: 0rpx 0 0;
			background: #fff;
			border-bottom: 1px solid #fcfcfc;
			width: 100%;
			flex: 1;
			z-index: 1;
		}

		.selectBoxB {
			position: fixed;
			// top: 100rpx;
		}

		// 商品列表
		.shopList {
			width: 100%;
			padding: 20rpx 32rpx 0;
			margin-bottom: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.item {
				display: flex;
				margin-bottom: 29rpx;

				image {
					flex-shrink: 0;
					width: 210rpx;
					height: 210rpx;
					border-radius: 10rpx;
					margin-right: 24rpx;
				}

				.itemInfo {
					padding: 20rpx 0 32rpx 0;
					border-bottom: 2rpx solid #EEEEEE;
					height: 230rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.top {
						font: bold 34rpx/34rpx PingFang SC;
						color: #333;

						.title {
							width: 456rpx;
						}

						.tag {
							margin-top: 17rpx;
							display: inline-block;
							padding: 6rpx 7rpx;
							background-color: #F4EBDC;
							font: 500 24rpx/34rpx PingFang SC;
							color: #AE8C6C;
						}
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 35rpx;

						.left {
							.price {
								font: bold 20rpx/20rpx PingFang SC;
								color: #F66036;

								text {
									font: 800 40rpx/20rpx PingFang SC;
								}
							}

							.sale_price {
								font: 500 20rpx/20rpx PingFang SC;
								color: #666;
								margin-top: 12rpx;
							}
						}

						.right {
							width: 142rpx;
							height: 54rpx;
							border-radius: 27rpx;
							text-align: center;
							background-color: #C3AB7C;
							font: 500 26rpx/54rpx PingFang SC;
							color: #fff;
						}
					}
				}
			}
		}
	}

	.cu-modal {
		position: fixed;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		top: 0;
		display: none;
		width: 100%;
	}

	.show {
		display: block;
	}

	.bottom-md {
		position: absolute;
		bottom: 0;
		left: 0;
		background: #fff;
	}

	.share {
		position: fixed;
		color: #FFFFFF;
		right: 0;
		bottom: 190rpx;
		background: linear-gradient(to bottom right, #FE726B, #FE956B);
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		box-shadow: 0 0 20upx rgba(0, 0, 0, .09);
	}

	.cancel {
		width: 100vw;
		padding: 30rpx;
		text-align: center;
		background: #FFFFFF;
		color: #888;
		font-weight: normal;
		font-size: 30rpx;
	}

	.md-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0;
	}

	.md-content-item {
		margin: 0 70rpx;
		position: relative;
	}

	.md-content-item image {
		width: 100rpx;
		height: 100rpx;
		margin: auto;
	}

	.md-content-item view {
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.sharebtn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}
</style>
